<template>
    <div class="login">

        <span class="iconfont icon-question">&#xe71d;</span>

        <div class="login-logo">
            <div class="login-logo-img">
                <img class="full" src="https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=a58375814d2c9e34296285b57251635a&wh_rate=null&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2F3c6d55fbb2fb431619c5f9ad2da4462308f7d30b.jpg">
            </div>
            <p class="mi-account">小米账号登陆</p>
        </div>

        <div class="login-area-account flex-sb" :class="{'login-error-line':phoneError}">
            <div class="login-area-account-prefix">
                <div class="slide" ref="slide">
                    <span>+86</span>
                    <span class="iconfont">&#xe611;</span>
                </div>
            </div>
            <div class="login-area-input">
                <input class="login-input" type="text" placeholder="手机号码" v-model="phone">
            </div>
        </div>
        <div class="login-area-account flex-sb" :class="{'login-error-line':codeError}">
            <div class="login-area-input">
                <input v-model="code" class="login-input" type="text" placeholder="短信验证码">
            </div>
            <span class="get-code" :class="{'valicodeing':valicodeing}" @click="valicode">{{codeMsg}}</span>
        </div>
        <div class="login-error" v-if="phoneError || codeError">
            <span class="iconfont">&#xe607;</span>
            <span class="error-msg">{{errorMsg}}</span>
        </div>
        <div class="login-btn login-or-register" @click="dologin">立即登陆/注册</div>

        <div class="login-btn login-account-password">用户名密码登陆</div>

        <p class="no-code">收不到验证码?</p>

        <fieldset class="other-way">
            <legend>其他方式登陆</legend>
        </fieldset>
        
        <div class="other-way-list">
            <span class="iconfont">&#xe61f;</span>
            <span class="iconfont">&#xe60a;</span>
            <span class="iconfont">&#xe73b;</span>
            <span class="iconfont">&#xe63d;</span>
        </div>

        <div class="login-bottom">
            <span>简体</span>
            <span>|</span>
            <span>繁体</span>
            <span>|</span>
            <span>English</span>
            <span>|</span>
            <span>常见问题</span>
            <span>|</span>
            <span>隐私政策</span>
        </div>
    </div>
</template>
<script>

export default {
    name: 'Login',
    data() {
        return {
            phone:'',
            code:'',
            phoneError:0,
            codeError:0,
            valicodeing:0,
            errorMsg: '',
            codeMsg: '获取验证码',
            codeStatus:0
        }
    },
    methods:{
        dologin() {
            if(!this.vali()) {
                return;
            }
            if(!this.codeStatus) {
                this.codeError = 1;
                this.errorMsg = '请获取验证码';
                return;
            }
             if(this.code.trim() === '') {
                this.codeError = 1;
                this.errorMsg = '请输入验证码';
                return;
            }
            if(this.code) {
                localStorage.setItem('user',{phone: this.phone});
                let loading = this.$loading();
                setTimeout(() => {
                    loading.close();
                    this.$router.push('/');
                }, 1000);
                return;
            } 
            this.codeError = 1;
            this.errorMsg = '验证码错误';
        },
        vali() {
            if(this.phone.trim() === '') {
                this.phoneError = 1;
                this.valicodeing = 0;
                this.errorMsg = '请输入手机号码';
                return false;
            }
            if(!this.$helper.isValidPhone(this.phone)) {
                this.phoneError = 1;
                this.valicodeing = 0;
                this.errorMsg = '无效的手机号码';
                return false;
            }
            this.phoneError = 0;
            return true;
        },
        valicode() {
            if(this.valicodeing) {
                return;
            }
            if(!this.vali()) {
                return;
            }
            this.phoneError = 0;
            this.valicodeing = 1;
            this.codeStatus = 1;
            let count = 60;
            this.codeMsg = '获取验证码 ('+count+')';
            let timeint;
            count--;
            timeint = setInterval(()=>{
                this.codeMsg = '获取验证码 ('+count+')';
                count--;
                if(count < 0) {
                    clearInterval(timeint);
                    this.valicodeing = 0;
                    return;
                }
            },1000);
        },
    },
    mounted() {
        setTimeout(() => {
            this.$refs.slide.style.transform = 'translate(0)';
        })
    }
}
</script>
<style lang="stylus">
@import '../assets/css/theme.styl'

.login
    padding $mg;
    width:100%;
    position absolute;
    box-sizing:border-box;
    top:0;
    left:0;

.icon-question
    position:absolute;
    font-size:20px;
    font-weight 700;
    color #333;
    top:$mg;
    right:$mg;

.login-logo
    margin-top 30px;
    .login-logo-img
        border-radius:5px;
        overflow hidden
        margin auto;
        width 48px;
        height 48px;
    .mi-account
        margin-top 15px;
        font-size 18px;

.login-area-account
    color #999;
    font-size 18px;
    width 100%;
    height 53.8px;
    border-bottom 1PX solid #e2e2e2;
    margin-bottom 2PX;
    .login-area-account-prefix
        width 54.54px;
        height 40px;
        line-height 40px;
        overflow hidden
        .slide
            position: relative
            text-align: left;
            transform translate(-100%)
            transition:transform .3s;
            .iconfont
                font-size 22px;
                position:absolute;
                top 0;
                transform rotate(90deg)
    .get-code
        font-size 14px;
        color #0d84ff;
            
    .login-area-input
        flex 1;
        height 40px;
        line-height 40px;
        text-align: left;
        .login-input
            border none;

.login-error-line
    border-bottom 1PX solid #f66 !important;

input
    color: #999;
input::-webkit-input-placeholder 
    color: #999;

.login-error
    text-align: left;
    .iconfont
        vertical-align: middle;
        color #f66;
        font-size:24px;
    .error-msg
        color #f66
        font-size:15px;
.login-btn
    margin-top 25px;
    height 47px;
    background $themecolor;
    border-radius 30px;
    line-height 47px;
    color #fff;
    font-weight bold;
.login-account-password
    background rgba(0,0,0,.06)
    color rgba(0,0,0,.8);

.no-code
    margin-top 25px;
    color #9b9b9b;
.valicodeing
    color #aaa !important;

.other-way
    margin-top 40px;
    font-size 12px;
    color #9b9b9b;
    border:none;
    border-top 1px solid #f2f2f2;

.other-way-list
    margin-top 5px;
    span
        margin 0 10px;
        font-size 32px;

.login-bottom
    margin-top 80px;
    color #9b9b9b;
    font-size 13.5px;
    span
        margin 0 5px;
</style>